<template>
  <div class="song-control">
    <audio
      :src="songUrl"
      controls
      autoplay
      ref="audio"
      @timeupdate="lyricPipei()"
    ></audio>
    <div class="tupian">
      <img :src="img" alt="" />
    </div>
    <div class="songci">
      <ul ref="lyricUL">
        <li
          v-for="(item, i) in lyricArray"
          :style="{ color: lyricIndex === i ? 'skyblue' : '#ded9d9' }"
          :key="item.uid"
          :data-index="i"
          ref="lyric"
        >
          {{ item.lyric }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      songUrl: "",
      geci: "",
      lyricArray: [],
      lyricIndex: "",
      currentTime: Number,
      img: "",
    };
  },
  created() {
    this.getData(), this.getGeci(), this.getImg();
  },
  methods: {
    getData() {
      axios
        .get("http://171.220.242.237:3001/song/url", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          // console.log(res.data.data)
          this.songUrl = res.data.data[0].url;
          // console.log(this.songUrl)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getGeci() {
      axios
        .get("http://171.220.242.237:3001/lyric", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          // console.log(res.data)
          this.geci = res.data.lrc.lyric;
          let lyric2 = res.data.lrc.lyric;
          this.lyricArray = this.lyricConvertObj(lyric2);
          // console.log("-----"+this.geci)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    lyricConvertObj(lyric) {
      const regNewLine = /\n/;
      const lineArr = lyric.split(regNewLine); // 每行歌词的数组
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
      let lyricsObjArr = [];
      lineArr.forEach((item) => {
        if (item === "") return;
        const obj = {};
        const time = item.match(regTime);

        obj.lyric =
          item.split("]")[1].trim() === "" ? "" : item.split("]")[1].trim();
        obj.time = time
          ? this.formatLyricTime(time[0].slice(1, time[0].length - 1))
          : 0;
        obj.uid = Math.random().toString().slice(-6);
        if (obj.lyric === "") {
          console.log("这一行没有歌词");
        } else {
          lyricsObjArr.push(obj);
        }
      });
      return lyricsObjArr;
    },
    formatLyricTime(time) {
      // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/;
      const regSec = /:.*\./;
      const regMs = /\./;

      const min = parseInt(time.match(regMin)[0].slice(0, 2));
      let sec = parseInt(time.match(regSec)[0].slice(1, 3));
      const ms = time.slice(
        time.match(regMs).index + 1,
        time.match(regMs).index + 3
      );
      if (min !== 0) {
        sec += min * 60;
      }
      return Number(sec + "." + ms);
    },
    lyricPipei() {
      //   console.log(this.$refs.audio);
      // console.log("-----------------"+this.$refs.audio);
      //   this.$refs.audio.οntimeupdate = function() {

      //   };
      this.currentTime = this.$refs.audio.currentTime;
      //  console.log("-----------------------currenttime："+this.currentTime)
      // 匹配歌词
      for (let i = 0; i < this.lyricArray.length; i++) {
        if (this.currentTime > parseInt(this.lyricArray[i].time)) {
          const index = this.$refs.lyric[i].dataset.index;
          if (i === parseInt(index)) {
            this.lyricIndex = i;
            this.$refs.lyricUL.style.transform = `translateY(${
              170 - 30 * (i + 1)
            }px)`;
          }
        }
      }
    },
    getImg() {
      axios
        .get("http://171.220.242.237:3001/song/detail", {
          params: {
            ids: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data.songs[0].al.picUrl);
          // this.songUrl=res.data.data[0].url
          // console.log(this.songUrl)
          this.img = res.data.songs[0].al.picUrl;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
<style scoped>
.songci {
  /* width: 400px; */
  /* height: 600px; */
  margin-top: 20px;
  overflow: hidden;
}
.tupian img{

border-radius: 50%;
 -webkit-animation:rotateImg 12s linear infinite;
    width: 350px ;
    height: 350px;
    border: 1px solid #ccc;
    vertical-align: middle;
      /* animation: rotation 2s linear infinite; */
}
@keyframes rotateImg {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
  
}

@-webkit-keyframes rotateImg {
    0%{-webkit-transform : rotate(0deg);}
  100%{-webkit-transform : rotate(360deg);}
}

</style>